import React, { Component } from 'react'
import { connect } from 'react-redux'
import { project as projectDuck } from 'ducks'
import PropTypes from 'prop-types'
import {
  Grid, Image, Menu, Table, Checkbox, Label, Icon,
} from 'semantic-ui-react'
import { LinkButton } from 'components/Button'
import { TableRow, OptionIcon } from 'components/memberTable'

class ClassesConfig extends Component {
  componentDidMount = () => {
    const { actionSetActiveConfigTab } = this.props
    actionSetActiveConfigTab('classes')
  }

  render() {
    const { match } = this.props
    return (
      <Grid>
        <Grid.Row>
          <Grid.Column>
            <Menu secondary>
              <Menu.Item fitted>
                <LinkButton src={`${match.url}/new`}>新建标注类型</LinkButton>
              </Menu.Item>
            </Menu>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          <Grid.Column>
            <Table basic="very" style={{ marginBottom: '2em' }}>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>
                    <Checkbox />
                  </Table.HeaderCell>
                  <Table.HeaderCell
                    style={{
                      wordBreak: 'keep-all',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    名称
                  </Table.HeaderCell>
                  <Table.HeaderCell>颜色</Table.HeaderCell>
                  <Table.HeaderCell>类型</Table.HeaderCell>
                  <Table.HeaderCell>标签</Table.HeaderCell>
                  <Table.HeaderCell />
                </Table.Row>
              </Table.Header>

              <Table.Body>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>人</Table.Cell>
                  <Table.Cell>
                    <Label circular color="red" size="mini" />
                  </Table.Cell>
                  <Table.Cell>矩形</Table.Cell>
                  <Table.Cell>
                    <Label>
                      男
                      <Icon name="delete" />
                    </Label>
                    <Label>
                      白人
                      <Icon name="delete" />
                    </Label>
                    <Label as="a" color="green">
                      <Icon name="add" />
                      添加
                    </Label>
                  </Table.Cell>
                  <Table.Cell className="last-cell" width={2} textAlign="right">
                    <OptionIcon className="options" color="blue" name="pencil alternate" />
                    <OptionIcon className="options" color="red" name="remove" />
                  </Table.Cell>
                </TableRow>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>车</Table.Cell>
                  <Table.Cell>
                    <Label circular color="blue" size="mini" />
                  </Table.Cell>
                  <Table.Cell>多边形</Table.Cell>
                  <Table.Cell>
                    <Label>
                      奔驰
                      <Icon name="delete" />
                    </Label>
                    <Label>
                      白色
                      <Icon name="delete" />
                    </Label>
                    <Label>
                      A4
                      <Icon name="delete" />
                    </Label>
                    <Label as="a" color="green">
                      <Icon name="add" />
                      添加
                    </Label>
                  </Table.Cell>
                  <Table.Cell className="last-cell" width={2} textAlign="right">
                    <OptionIcon className="options" color="blue" name="pencil alternate" />
                    <OptionIcon className="options" color="red" name="remove" />
                  </Table.Cell>
                </TableRow>
              </Table.Body>
            </Table>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

const mapDispatchToProps = {
  actionSetActiveConfigTab: projectDuck.creators.actionSetActiveConfigTab,
}

export default connect(
  null,
  mapDispatchToProps,
)(ClassesConfig)
